<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{title}}</title>
    <link rel="icon" href="/static/favicon.ico" />
    <link rel="stylesheet" href="/static/css/style.css" />
  </head>
  <body>
    <!-- 顶部导航条固定 -->
    <nav>
      <div class="nav-base">
        <i class="nav-logo logo-bml"></i>
        <ul class="nav-change">
          <li><button id="tokenBtnEl" title="连接识别库">连接</button></li>
          <li><button id="resultBtnEl" title="显示识别结果图">结果</button></li>
          <li><button id="sliceBtnEl" title="显示对识别结果的类别分割小图">分割</button></li>
          <li class="file" style="background-color: #b793ec;">
            <input
              type="file"
              accept="image/jpeg"
              id="fileInputEl"
              title="更换文件"
            />更换
          </li>
          <li><button id="typeBtnEl" title="预测识别模式">图片</button></li>
        </ul>
        <div class="nav-title">
          基于 ModelArts 平台模型部署预测
          <div style="font-size: 0.9rem;text-align: end;opacity: 0.7;">—— Mask R-CNN</div>
        </div>
      </div>
    </nav>

    <div class="page">
      <!-- 背景动画 -->
      <div class="bml-bg">
        <div class="shooting-star">
          <i class="shooting-star-line"></i>
          <i class="shooting-star-star"></i>
        </div>
        <div class="star-box star-box-1"><i class="star"></i></div>
        <div class="star-box star-box-2"><i class="star"></i></div>
        <svg width="100%" height="100%">
          <path
            fill="transparent"
            stroke="rgba(255, 255, 255, .3)"
            stroke-width="2"
            stroke-dasharray="5,5"
            id="train-path1"
            d="M 0, 0 m -487, 0 a487,487 0 1,0 974,0 a487,487 0 1,0 -974,0"
          ></path>
        </svg>
        <svg width="100%" height="100%">
          <path
            fill="transparent"
            stroke="rgba(255, 255, 255, .3)"
            stroke-width="2"
            stroke-dasharray="5,5"
            id="train-path1"
            d="M 1920 974 m -487 0 a 487 487 0 1 0 974 0 a 487 487 0 1 0 -974 0"
          ></path>
        </svg>
      </div>
      <!-- 左侧 -->
      <div class="main-switch">
        <!-- 相机部分 -->
        <div class="main-switch-camera">
          <i class="camera-block"></i>
          <i class="camera-dot-pink"></i>
          <i class="camera-dot-aoi"></i>
          <!-- 图片预测 -->
          <img id="imgEl" src="/static/favicon.ico" alt="预测图片" />
          <!-- 视频预测 -->
          <video
            id="videoEl"
            poster="/static/favicon.ico"
            muted
            controls
            title="预测视频"
          ></video>
        </div>
        <!-- 小图 -->
        <div class="recognizerBox">
          <div id="recognizerBoxEl"></div> 
        </div>
      </div>
      <!-- 右侧固定 -->
      <div class="main-switch-info">
        <i class="main-switch-sound sound-top"></i>
        <i class="main-switch-sound sound-bottom"></i>
        <div class="title">预测结果：</div>
        <canvas id="canvasEl"></canvas>
        <!-- 结果统计输出 -->
        <div id="infoBoxEl"></div> 
      </div>
    </div>

    <script src="/static/js/index.js"></script>
  </body>
</html>
